<template>
	<view>
		<!-- 自定义顶部 -->
		<u-navbar style="background-color: #007AFF;" :is-back="false" title="收货地址">
			<view class="slot-wrap">
				<u-icon name="arrow-left" style="margin-left: 10rpx;" @tap="getBack" size="45"></u-icon>
				<view class="coupons_left_line"></view>
				<u-icon name="home" @tap="home"  size="40"></u-icon>
			</view>
		</u-navbar>
		<!-- end -->
		<!-- 搜索 -->
		<view class="padding25rpx">
			<u-search 
				bg-color="#F4F4F4"
				animation="true" 
				height="80"
				v-model="serach"
				:shape="square"
				:show-action="false"
				placeholder="请输入小区/街道/建筑名"
			></u-search>
		</view>
		<!-- end -->
		<!-- tab -->
		<view  >
			<view style="padding-bottom: 25rpx;">
				<u-tabs-swiper ref="tabs"
					inactive-color="#999999" 
					:list="list" 
					@change="tabs"
					:current="current"
					active-color="#333333"
					:bar-style="barStyle"
					:is-scroll="false"></u-tabs-swiper>
			</view>
			<view v-if="current == 0" class="wrap">
				<!-- 地图显示 -->
				<map style="width: 100%;height: 800rpx;" 
					:latitude="latitude"  
					:longitude="longitude" 
					:markers="marker" 
					:scale="scale"  
					:polyline="polyline"
				></map>
				<!-- end -->
				<!-- 附近定位的点的列表数据 -->
				<view class="padding25rpx li atlin" style="position: relative;" v-for="(item,index) in frequent" :key="index">
					<view>
						<view class="size32rpx">{{item.tit}}</view>
						<view class="color99 size28rpx marTop10">{{item.address}}</view>
						<view class="color33 size28rpx marTop10">
							<label>{{item.name}}</label>
							<label class="marLeFt20">{{item.phone}}</label>
						</view>
					</view>
					<!-- <u-icon class="ico" name="checkbox-mark" color="#fa6600" size="35"></u-icon> -->
				</view>
				<view class="padding35rpx">
					<button style="background-color: #fa6600; color: #FFFFFF;" @click="add">选择其他地址</button>
				</view>
			</view>
			<view v-if="current == 1">
				<u-gap height="25" bg-color="#F4F4F4"></u-gap>
				<view class="padding25rpx li atlin" style="position: relative;" v-for="(item,index) in frequent" :key="index">
					<view>
						<view class="size32rpx">{{item.tit}}</view>
						<view class="color99 size28rpx marTop10">{{item.address}}</view>
						<view class="color33 size28rpx marTop10">
							<label>{{item.name}}</label>
							<label class="marLeFt20">{{item.phone}}</label>
						</view>
					</view>
					<!-- <u-icon class="ico" name="checkbox-mark" color="#fa6600" size="35"></u-icon> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serach:'',//搜索
				barStyle:{background:'#fa6600'},
				list:[{name:'附近的点'},{name:'常用地址'}],
				current:0,
				//经纬度
				latitude:26.56822,
				//中心维度
				longitude:106.7141,
				//标记点
				marker:[],
				//缩放级别
				scale:13,
				//路线
				polyline:[],
				//常用地址
				frequent:[
					{
						tit:'天一国际广场（贵阳市观赏湖区）',
						address:'观山湖区天一国际广场',
						name:'王大壮',
						phone:'18788006600'
					},
					{
						tit:'天一国际广场（贵阳市观赏湖区）',
						address:'观山湖区天一国际广场',
						name:'王大壮',
						phone:'18788006600'
					},
					{
						tit:'天一国际广场（贵阳市观赏湖区）',
						address:'观山湖区天一国际广场',
						name:'王大壮',
						phone:'18788006600'
					},
					{
						tit:'天一国际广场（贵阳市观赏湖区）',
						address:'观山湖区天一国际广场',
						name:'王大壮',
						phone:'18788006600'
					}
				]
			}
		},
		onLoad() {
			
			uni.getLocation({
				type:'wgs84',
				success: (res) => {
					console.log(res,'获取当前定位')
					this.latitude = res.latitude
					this.longitude = res.longitude
				}
				
			})
		},
		methods: {
			//切换tab
			tabs(index){
				this.current = index
			},
			add(){
				console.log('5131')
				uni.chooseLocation({
					 success: function (res) {
					        console.log('位置名称：' + res.name);
					        console.log('详细地址：' + res.address);
					        console.log('纬度：' + res.latitude);
					        console.log('经度：' + res.longitude);
					 },
					 fail:()=>{
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if(!status['scope.userLocation']){
								// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title:"是否授权当前位置",
										content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success:(tip)=>{
											if(tip.confirm){
											// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success:(data)=>{
													// 如果用户授权了地理信息在，则提示授权成功
														if(data.authSetting['scope.userLocation']===true){
															uni.showToast({
																title:"授权成功",
																icon:"success",
																duration:1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (res) => {
																	console.log("详细地址",res);
																	// this.getRegionFn(res);
																}
															})
														}else{
															uni.showToast({
																title:"授权失败",
																icon:"none",
																duration:1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title:"调用授权窗口失败",
									icon:"none",
									duration:1000
								})
							}
					 })
					}
				})
			},
			//返回首页
			home(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			//返回上一页
			getBack(){
				this.$mHelper.back(1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ico{
		position: absolute;right: 25rpx;
	}
</style>
